// pages/lanchBanner/lanchBanner.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWidth: 0,
    isIPX:false,//是否是iPhoneX
  },
  /**
   * 设置画布自适应大小
   */
  setCanvasSize() {
    let that = this
    return new Promise((res, rej) => {
      wx.createSelectorQuery().select('.adBgSlogan2').boundingClientRect(function (rect) {
        let temHeight = rect.bottom
        that.setData({
          canvasWidth: app.globalData.systemInfo.screenWidth*2,
          canvasHeight: app.globalData.systemInfo.screenHeight*0.4
        })
        res()
      }).exec()
    })
  },
  /**
   * @method
   * @desc 旋转画板
   */
  rotateCanvas(){
    let temCanvas=wx.createSelectorQuery().select('.adBgSlogan2').exec()
    // temCanvas.style.transform=rota
  },
  /**
   * 跳转主页
   */
  goToIndex(){
    wx.switchTab({
      url: '/pages/index/index',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    let temHeight
    let temWidth
    that.setData({
      isIPX:app.globalData.isIPX
    })
    that.setCanvasSize().then(res => {
      temHeight = that.data.canvasHeight
      temWidth = that.data.canvasWidth
      const ctx = wx.createCanvasContext('adBanner', this)
      //第一条贝塞尔曲线参数
      let offset = temWidth*0.1//纵向振幅
      let direction=1//纵向方向
      let currentOffset = temWidth*0.11//目前纵向位置
      let position = temWidth*0.17//曲线纵向位置
      let alpha=0.3//曲线透明度
      let xposition=0//曲线横向位置

      //第二条贝塞尔曲线参数
      let offset2 = temWidth*0.07//纵向振幅
      let direction2 = -1//纵向方向
      let currentOffset2 = 0//目前纵向位置
      let position2 = temWidth*0.20//曲线纵向位置
      let alpha2 = 0.3//曲线透明度
      let xposition2 = 100//曲线横向位置

      //第三条贝塞尔曲线参数
      let offset3 = temWidth*0.12//纵向振幅
      let direction3 = -1//纵向方向
      let currentOffset3 = -temWidth*0.07//目前纵向位置
      let position3 = temWidth*0.18//曲线纵向位置
      let alpha3 = 0.3//曲线透明度
      let xposition3 = -50//曲线横向位置


      setInterval(function(){
        // 第一条贝塞尔曲线
        if (direction > 0) {
          currentOffset+=2
          if (currentOffset > offset) {
            direction = -1
          }
        } else if (direction < 0) {
          currentOffset-=2
          if (currentOffset < (-offset)) {
            direction = +1
          }
        }
        ctx.clearRect(0,0,temWidth,temHeight)
        ctx.beginPath()
        ctx.moveTo(xposition, position)
        ctx.bezierCurveTo(temWidth * (xposition + 0.33), currentOffset, temWidth * (xposition + 0.33 * 2), -currentOffset, temWidth * (xposition + 0.33 * 3), position)
        ctx.lineTo(temWidth,temHeight)
        ctx.lineTo(0,temHeight)
        ctx.closePath()
        ctx.setFillStyle('#ffffff')
        ctx.setGlobalAlpha(alpha)
        ctx.fill()
        // ctx.draw()
        //第二条贝塞尔曲线
        if (direction2 > 0) {
          currentOffset2+=2
          if (currentOffset2 > offset2) {
            direction2 = -1
          }
        } else if (direction2 < 0) {
          currentOffset2-=2
          if (currentOffset2 < (-offset2)) {
            direction2 = +1
          }
        }
        ctx.beginPath()
        ctx.moveTo(xposition2, position2)
        ctx.bezierCurveTo(temWidth * (0.2), currentOffset2, temWidth * (0.55), -currentOffset2, temWidth * (1), position2)
        ctx.lineTo(temWidth, temHeight)
        ctx.lineTo(0, temHeight)
        ctx.closePath()
        ctx.setFillStyle('#ffffff')
        ctx.setGlobalAlpha(alpha2)
        ctx.fill()
        // ctx.draw(true)
        //第三条贝塞尔曲线
        if (direction3 > 0) {
          currentOffset3+=2
          if (currentOffset3 > offset3) {
            direction3 = -1
          }
        } else if (direction3 < 0) {
          currentOffset3-=2
          if (currentOffset3 < (-offset3)) {
            direction3 = +1
          }
        }
        ctx.beginPath()
        ctx.moveTo(xposition3, position3)
        ctx.bezierCurveTo(temWidth * (0.43), currentOffset3, temWidth * ( 0.55), -currentOffset3, temWidth * (1), position3)
        ctx.lineTo(temWidth, temHeight)
        ctx.lineTo(0, temHeight)
        ctx.closePath()
        ctx.setFillStyle('#ffffff')
        ctx.setGlobalAlpha(alpha3)
        ctx.fill()
        ctx.draw()
      },100)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})